<template>
 <div class="login">
    <h1 class="login-title">{{ msg }}</h1>
    <div class="login-edit">
      <form class="login-from">
        <div class="input-group">
          <div class="input-group__label">
            <span>账号</span>
          </div>
          <div class="input-group__value">
            <input type="text" placeholder="请填写姓名" v-model="login.name" />
          </div>
          <div
            class="input-group__btn"
            v-if="login.name"
            @click="cleanInput('name', login.name)"
          >
            <svg
              class="icon"
              style="
                width: 1.6em;
                height: 1.6em;
                vertical-align: middle;
                fill: currentColor;
                overflow: hidden;
              "
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="1017"
            >
              <path
                d="M361.2 691.7c-6.4 0-12.8-2.4-17.7-7.3-9.8-9.8-9.8-25.6 0-35.3l304.4-304.4c9.8-9.8 25.6-9.8 35.3 0 9.8 9.7 9.8 25.6 0 35.3L378.9 684.4c-4.9 4.9-11.3 7.3-17.7 7.3z"
                fill="#586168"
                p-id="1018"
              ></path>
              <path
                d="M665.6 691.7c-6.4 0-12.8-2.4-17.7-7.3L343.6 380c-9.8-9.7-9.8-25.6 0-35.3 9.8-9.8 25.6-9.8 35.3 0l304.4 304.4c9.8 9.8 9.8 25.6 0 35.3-4.9 4.9-11.3 7.3-17.7 7.3z"
                fill="#586168"
                p-id="1019"
              ></path>
            </svg>
          </div>
        </div>
        <div class="input-group">
          <div class="input-group__label">
            <span>密码</span>
          </div>
          <div class="input-group__value">
            <input type="password" placeholder="请填写密码" autocomplete="off" v-model="login.password"/>
          </div>
          <div
            class="input-group__btn"
            v-if="login.password"
            @click="cleanInput('password', login.password)"
          >
            <svg
              class="icon"
              style="
                width: 1.6em;
                height: 1.6em;
                vertical-align: middle;
                fill: currentColor;
                overflow: hidden;
              "
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="1017"
            >
              <path
                d="M361.2 691.7c-6.4 0-12.8-2.4-17.7-7.3-9.8-9.8-9.8-25.6 0-35.3l304.4-304.4c9.8-9.8 25.6-9.8 35.3 0 9.8 9.7 9.8 25.6 0 35.3L378.9 684.4c-4.9 4.9-11.3 7.3-17.7 7.3z"
                fill="#586168"
                p-id="1018"
              ></path>
              <path
                d="M665.6 691.7c-6.4 0-12.8-2.4-17.7-7.3L343.6 380c-9.8-9.7-9.8-25.6 0-35.3 9.8-9.8 25.6-9.8 35.3 0l304.4 304.4c9.8 9.8 9.8 25.6 0 35.3-4.9 4.9-11.3 7.3-17.7 7.3z"
                fill="#586168"
                p-id="1019"
              ></path>
            </svg>
          </div>
        </div>
      </form>
    </div>
    <div class="login-edit__buttons">
      <div class="button" @click="login()">
        <div class="button__text">登录</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue } from 'vue-class-component'

export default class Login extends Vue {
  msg:string = '管理员登录'
  login:any= {
    name: '',
    password: ''
  }

  public cleanInput(key: string, value: string): void {
    const that = (this as any)
    if (value) {
      that.login[key] = ''
    }
    console.log(value)
  }

  public submit(): void {
    alert('测试成功' + this.msg)
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.login-title{
  font-size:4.8rem;
  color:#00a1d6;
}
.login-edit {
  padding: 2rem;
}
.login-from {
  width: 100%;
  border-radius: 1rem;
  overflow: hidden;
}
.input-group {
  display: flex;
  flex-wrap: nowrap;
  font-size: 3.6rem;
  line-height: 7.2rem;
  background-color: #fff;
  padding: 1rem 1.6rem;
}
.input-group__label {
  flex-shrink:0; /* 当flex空间不足，该项目不发收缩 */
  width: 22rem;
  box-sizing: border-box;
  word-wrap: break-word;
  box-sizing: border-box;
  padding-right: 3.6rem;
}
.input-group__label span {
  display: inline-block;
  width: 100%;
  text-align-last:justify;
  box-sizing: border-box;
}

.input-group__value {
  box-sizing: border-box;
}
.input-group__value input {
  width: 100%;
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  color: #323233;
  line-height: inherit;
  text-align: left;
  background-color: transparent;
  border: 0;
  resize: none;
  cursor: text;
  font-size: 3.6rem;
  line-height: 7.2rem;
  color: #323233;
  outline: none;
}
input::placeholder {
  color: rgb(225, 228, 225);
}
.input-group__value textarea {
  display: inline-block;
  width: 100%;
  outline: none;
  border: 0;
}
.input-group__btn{
  flex-shrink:0; /* 当flex空间不足，该项目不发收缩 */
  cursor: pointer;
}
.login-edit__buttons {
  padding: 3.2rem 0;
  color: #fff;
  cursor: pointer;
}
.login-edit__buttons .button {
  padding: 0 2rem;
}
.login-edit__buttons .button__text {
  position: relative;
  background-color: #00a1d6;
  border-radius: 1rem;
  font-size: 3.8rem;
  line-height: 7.2rem;
  padding: 1rem 0;
  box-sizing: border-box;
  text-align: center;
}
.vlogin-edit__buttons .button__text::after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  content: '';
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  z-index: 10;
}
</style>
